<template>
  <div class="da">
    <h1>欢迎注册</h1>

    <van-form>
      <van-field
        v-model="form.name"
        label="用户名"
        placeholder="请输入用户名"
        required
      />

      <div class="gender-field">
        <span class="label">性别：</span>
        <van-radio-group v-model="form.sex" direction="horizontal">
          <van-radio name="1">男</van-radio>
          <van-radio name="0">女</van-radio>
        </van-radio-group>
      </div>

      <van-field
        v-model="form.birthday"
        label="生日"
        placeholder="请选择生日"
        required
        type="date"
      />
      <van-field
        v-model="form.mailbox"
        label="邮箱"
        placeholder="请输入邮箱"
        type="email"
      />

      <van-field
        v-model="form.tel"
        label="手机号"
        placeholder="请输入手机号"
        required
      />
      <van-field
        v-model="form.verify"
        label="验证码"
        placeholder="请输入验证码"
        required
        :right-icon="sendCodeIcon"
      >
        <template #right-icon>
          <van-button @click="yanzhengma()" size="small">发送验证码</van-button>
        </template>
      </van-field>
      <van-button @click="cz()" round type="info">注册</van-button>
    </van-form>


    <div style="margin-top: 110px;">
      <van-row type="flex" justify="space-around">
        <van-col @click="registerLogin()" span="6">已有账号返回登录页面</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {},
      sendCodeIcon: 'send',
      // 图片
      dialogImageUrl: '',
      videoUrl: '',
      addForm: '',
      updateForm: ''

    };
  },
  methods: {
    registerLogin() {
      this.$router.push({path: "/"});
    },
    yanzhengma() {
      this.phone = this.form.phone;
      axios.get(`login/JWTTest/send?tel=${this.form.tel}`).then(res => {
        if (res.data.code === 200) {
          this.$message.success("发送成功");
        } else {
          this.$message.error("发送失败");
        }
      });
    },
    cz() {
      axios.post(`login/login/zhuce`, this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success("注册成功");
          this.$router.push({path: "/shouye"});
        } else {
          this.$message.error("注册失败");
        }
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    handleUploadSuccess(response) {
      // 在这里可以从 response 中获取上传成功后的 URL
      this.addForm.url = response.data;
      this.updateForm.url = response.data;
      console.log(this.addForm.url)
      console.log('上传成功', response);
    },

  },
  created() {

  }
};
</script>

<style scoped>

.gender-field {
  display: flex;
  align-items: center;
}

.label {
  margin-right: 8px;
}
</style>
